<template>
  <div class="page-main page-main-lr ">
    <div class="page-container" :style="{height:domHeight+'px', minHeight: '500px'}">
      <div class="flex-wrap" :style="{marginRight:showSide ? '0' : '-24px' }">
        <div class="content-wrap">
          <!-- <el-scrollbar style="height:100%"> -->
            <slot name="contentLeft">
              
            </slot>
            <div class="collapse-search" @click="showSide = !showSide"><i :class="showSide ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i></div>
          <!-- </el-scrollbar> -->
        </div>
        
        <div class="content-side" v-show="showSide">
          <slot name="contentRight"></slot>
        </div>
      </div>
      <slot/>
    </div>
  </div>
</template>

<script setup lang="ts" name="pageLr">
import { reactive, ref, onMounted, nextTick } from 'vue';
const showSide = ref(true);
const domHeight = ref(0);
const getDomHeight = () => {
  let winHeight = document.body.clientHeight;
  domHeight.value = winHeight - 66;
};
onMounted( () => {
  getDomHeight();
})
</script>
